<template>
  <div class="b-stats-top">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card shadow="always" :body-style="{ padding: '0' }">
          <common-card title="半月内访问数量统计" value="10">
            <template>
              <v-chart :option="PVOptions" />
            </template>
            <template v-slot:footer>
              <div>
                <span>昨日访问量:</span>
                <span>0</span>
              </div>
            </template>
          </common-card>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always" :body-style="{ padding: '0' }">
          <common-card title="过去半月文章发布数量统计" value="">
            <template>
              <v-chart :option="articleOptions" />
            </template>
            <template v-slot:footer>
              <div>
                <span>文章总数:</span>
                <span>0</span>
              </div>
            </template>
          </common-card>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import CommonCard from "./../../BCommonCard/index.vue";
export default {
  name: "BStatsTop",
  data() {
    return {
      PVOptions: {
        color: ["#67c23a"],
        xAxis: {
          type: "category",
          data: [
            "2022-2-14",
            "2022-2-15",
            "2022-2-16",
            "2022-2-17",
            "2022-2-18",
            "2022-2-19",
            "2022-2-20",
            "2022-2-14",
            "2022-2-15",
            "2022-2-16",
            "2022-2-17",
            "2022-2-18",
            "2022-2-19",
            "2022-2-20"
          ],
          show: false
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: "line",
            smooth: true,
            data: [
              620,
              432,
              220,
              534,
              790,
              430,
              990,
              620,
              432,
              220,
              534,
              790,
              430,
              990
            ],
            areaStyle: {
              color: "rgba(65, 184, 131, .5)"
            },
            lineStyle: {
              // width: 0,
              color: "rgb(65, 184, 131)"
            }
            // itemStyle: {
            //     opacity: 0
            // }
          }
        ],
        tooltip: {
          trigger: "item",
          confine: true,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "rgba(50,50,50,0)",
          textStyle: {
            color: "#fff"
          },
          formatter: function(params) {
            const str = `
                            ${params.marker} ${params.name} <br/> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${params.data} <br/>
                        `;
            return str;
          }
        },
        grid: {
          top: 3,
          bottom: 0,
          left: -36,
          right: -35
        }
      },
      articleOptions: {
        color: ["#3392db"],
        xAxis: {
          // show: false,
          type: "category",
          data: [
            "2022-2-14",
            "2022-2-15",
            "2022-2-16",
            "2022-2-17",
            "2022-2-18",
            "2022-2-19",
            "2022-2-20",
            "2022-2-14",
            "2022-2-15",
            "2022-2-16",
            "2022-2-17",
            "2022-2-18",
            "2022-2-19",
            "2022-2-20"
          ],
          axisTick: {
            show: false,
            alignWithLabel: true,
            lineStyle: {
              color: "#999"
            }
          }
          // axisLine: {
          //     // show: false,
          //     // lineStyle: {
          //     //     // show: false,
          //     //     color: '#999'
          //     // }
          // },
          // axisLabel: {
          //     // show: false,
          //     color: '#333'
          // }
        },
        yAxis: {
          // show: false,
          // axisLine: {
          //     // show: false
          // },
          // axisTick: {
          //     // show: false
          // },
          axisLabel: {
            // show: false,
            color: "#333"
          },
          splitLine: {
            // show: false,
            lineStyle: {
              type: "dotted",
              color: "#ccc"
            }
          }
        },
        series: [
          {
            type: "bar",
            data: [6, 7, 8, 9, 10, 9, 12, 6, 7, 8, 9, 10, 9, 12],
            barWidth: "50%"
          }
        ],
        tooltip: {
          trigger: "item",
          confine: true,
          backgroundColor: "rgba(50,50,50,0.7)",
          borderColor: "rgba(50,50,50,0)",
          textStyle: {
            color: "#fff"
          },
          formatter: function(params) {
            const str = `
                            ${params.marker} ${params.name} <br/> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${params.data} 篇<br/>
                        `;
            return str;
          }
        },
        grid: {
          top: 10,
          bottom: 6,
          left: 40,
          right: 10
        }
      }
    };
  },
  components: {
    CommonCard
  }
};
</script>
<style scoped></style>
